<template>
    <div class="loading">
        <div class="circle"></div>
        <span>正在努力加载中...</span>
    </div>
</template>

<style lang='less' scoped>
.loading{
    width: 100px;
    margin: 20px auto;
    font-size: 10px;
    line-height: 30px;
    text-align: center;
    .circle{
        margin: 0 auto;
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        border-top: 7px solid rgb(173, 219, 151);
        border-radius: 50%;
        position: relative;
        animation: rotate1 1s linear infinite;
        &::after,
        &::before{
            content: "";
            width: 30px;
            height: 30px;
            box-sizing: border-box;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            top: -7px;
        }
        &::after{
            border-top: 7px solid rgb(209, 114, 79);
            transform: rotate(120deg);
        }
        &::before{
            border-top: 7px solid #affd;
            transform: rotate(240deg);
        }
        @keyframes rotate1 {
            to{
                transform: rotate(360deg);
            }
        }
    }
}
</style>